@import 'general';
.Q-Rollover.effect-02{
	// Initial
		img{.transition(all 200ms ease-in);}
		.mask{
			width: 400px;
			height: 400px;
   		padding: 60px;
			.translate-rotate(265px; 145px; 45deg);
			.transition(all 200ms ease-in-out);
		}
		h4{
  		border-bottom: 1px solid rgba(0, 0, 0, 0.3);
			background:transparent;
			.translate(200px; -200px);
			.transition(all 200ms ease-in-out);
		}
		p{
			.translate(-200px; 200px);
			.transition(all 200ms ease-in-out);
		}
		a.trigger{
			.translate(0px; 100px);
			.transition(all 200ms 100ms ease-in-out);
		}
	// animacion
		&:hover .mask{
			.opacity(1);
			.translate-rotate(-80px; -125px; 45deg);
		}
		&:hover h4,
		&:hover p,
		&:hover a.trigger{
			.opacity(1);
			.translate(0px; 0px);
		}
		&:hover h4{
			.transition-delay(300sm);
		}
		&:hover p{
			.transition-delay(100ms);
		}
		&:hover a.trigger{
			.transition-delay(200ms);
		}
}